<template>
    <!-- author：jiayi zhu
     date: 2018-3-23
     describe：用户管理-->
    <div class="control">
        <!-- 用户表格 -->
        <div class="dataTable" :style="{'height':dataHei}">
            <div class="modify">
                <el-button type="primary" plain @click="addUser()"><i class="el-icon-plus"></i>添加用户</el-button>
            </div>
            <!-- 引入的table组件 -->
            <jn-tablemanage 
                v-loading="loading"
                element-loading-text="拼命加载中"
                :tableData="userData" 
                :tableConfig="tableConfig"
                v-on:handleClick="handleClick">
            </jn-tablemanage>

            <el-dialog
              :title="(ifAdd?'添加用户':'编辑用户')"
              :visible.sync="userShow"
              width="40%"
              :before-close="handleClose">
                <el-form ref="userForm" :model="userForm" label-width="100px" :rules="rules">
                    <el-form-item label="用户名：" prop="user_name">
                        <el-input v-model="userForm.user_name"></el-input>
                    </el-form-item>
                    <el-form-item label="密码：" prop="password">
                        <el-input v-model="userForm.password" type="password"></el-input>
                    </el-form-item>
                    <el-form-item label="权限：">
                        <el-select v-model="userForm.permissionValue" placeholder="请选择用户权限">
                          <el-option label="超级管理员" value="2"></el-option>
                          <el-option label="管理员" value="1"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
              <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose()">取 消</el-button>
                <el-button type="primary" @click="handleQuest()">确 定</el-button>
              </span>
            </el-dialog>
        </div>     
    </div>
</template>

<script>
import "@/assets/css/common.css"
import jnTablemanage from '@/components/tableComponent.vue'
import {setCookie,getCookie,delCookie} from '@/tools/cookie'

export default {
    name: 'userManage',
        data () {
        return {
            token:'',
            obj:{
                pageBean:{
                    sortRule:"",
                    sortValue:"",
                    page:1,
                    pageSize:13
                },
                dataBean:{
                }
            },

            ifAdd:false,
            ifModify:false,

            userForm:{
                user_name:'',
                password:'',
                permissionValue:'',
                token:''
            },

            tableConfig: {
                // heightConfig:500,
                // ***操作选项的宽度
                handleWidth:150,
                //   ***ifSelected是否可多选 必传
                ifSelected:false,   
                //   ***ifIndex是否有序号 必传
                ifIndex: true,
                //   ***ifHandle是否有操作项 必传
                ifHandle: true,
                // ***ifPagination是否需要分页栏 必传
                ifPagination:false,
                //   ***titleData: 表头的值 prop：指当列在userData的key; label:指当列的表头的值；width:当列的宽 必传
                titleData:[ {
		            prop: "user_name",
		            label: "用户名",
		            // width: "300"
		          },
		          {
		            prop: "level_name",
		            label: "权限",
		            // width: "200"
		          },
                  {
                    prop: "add_time",
                    label: "注册时间",
                    // width: "200"
                  }],
                //   ***handleData: 有操作按钮的需要传入的值；当ifHandle为true时必传
                //   ***key：该按钮的代表值,用来区分点击了哪个按钮；
                //   ***btnName:该按钮的显示值；
                //   ***btnIcon:该按钮的icon的class
            handleData: [ {
                    key: 'edit',
                    btnName: '编辑',
                    btn:true,
                    btnIcon: 'el-icon-edit',
                },{
                    key: 'delete',
                    btnName: '删除',
                    btn:true,
                    btnIcon: 'el-icon-delete',
                }],
            },

            userData: [],
            loading:false,
            userShow:false,
            rules:{
                user_name:[
                    {required: true, message: '请输入用户名！', trigger: 'blur'}
                ],
                password:[
                    {required: true, message: '请输入用户密码！', trigger: 'blur'}
                ]
            }
        }
    },
    methods: {
        addUser(){
            this.ifAdd=true
            this.userShow=true
            this.userForm={}
            // this.$refs['userForm'].resetFields();
        },
        handleClose(){
            this.userShow=false
            this.$refs['userForm'].resetFields();
        },
        handleClick(data, key){
            if(key=='edit'){
                this.ifAdd=false
                this.userShow=true
                this.userForm=data
                this.userForm.permissionValue=data.level.toString()
            }else if(key=='delete'){
                var vm=this
                $.ajax({
                    url: "http://by.gole.site/api/user/del",
                    type: 'POST',
                    async:false,
                    data: JSON.stringify({
                        uid:data.id,
                        token:vm.token
                    }),
                }).done(function(res) {
                    if(res.status==0){
                        vm.$message({
                          message:res.msg,
                          type: 'warning'
                        });
                    }else{
                        console.log(res)
                        vm.userDataApi();
                        vm.$message({
                          message: '删除成功！',
                          type: 'success'
                        });
                    }
                }).fail(function(res) {
                    vm.$notify.error({
                      message: '删除失败！'
                    });
                });            
            }
        },
        // 查询用户列表
        userDataApi(){
            this.loading=true
            this.token=getCookie('token')
            var vm=this
            $.ajax({
                    url: "http://by.gole.site/api/user/get",
                    type: 'POST',
                    async:false,
                    data: JSON.stringify({
                        token:vm.token
                    }),
                }).done(function(res) {
                    if(res.status==0){
                        vm.$message({
                          message:res.msg,
                          type: 'warning'
                        });
                    }else{
                        vm.userData=res.lists
                        vm.loading=false
                        // for(var i in res.lists){
                        //     if(res.lisits[i].level==1){
                        //         vm.userData[i].level="管理员"
                        //     }else if(res.lists[i].level==2){
                        //         vm.userData[i].level="超级管理员"
                        //     }
                        // }
                    }
                }).fail(function(res) {
                    vm.$notify.error({
                      message: '数据请求失败！'
                    });
                });
        },
        handleQuest(){
            this.$refs['userForm'].validate((valid) => {
                if (valid) {
                    this.userForm.token=getCookie('token')
                    var vm=this
                    if(this.ifAdd==true){
                        $.ajax({
                            url: "http://by.gole.site/api/user/add",
                            type: 'POST',
                            async:false,
                            data: JSON.stringify(this.userForm),
                        }).done(function(res) {
                            if(res.status==0){
                                vm.$message({
                                  message:res.msg,
                                  type: 'warning'
                                });
                            }else{
                                vm.userShow=false
                                vm.userDataApi();
                                vm.$message({
                                  message: '添加成功！',
                                  type: 'success'
                                });
                            }
                        }).fail(function(res) {
                            vm.$notify.error({
                              message: '添加用户失败！'
                            });
                        });
                    }else{
                        $.ajax({
                            url: "http://by.gole.site/api/user/edit",
                            type: 'POST',
                            async:false,
                            data: JSON.stringify({
                                token:getCookie('token'),
                                uid:vm.userForm.id,
                                rename:vm.userForm.user_name,
                                new_password:vm.userForm.password,
                                level:vm.userForm.permissionValue
                            }),
                        }).done(function(res) {
                            if(res.status==0){
                                vm.$message({
                                  message:res.msg,
                                  type: 'warning'
                                });
                            }else{
                                vm.userShow=false
                                vm.userDataApi();
                                vm.$message({
                                  message: '修改成功！',
                                  type: 'success'
                                });
                            }
                        }).fail(function(res) {
                            vm.$notify.error({
                              message: '编辑用户失败！'
                            });
                        });
                    }
                } else {
                    return false;
                }
            })
        }
    },
    mounted(){
        this.userDataApi();
        if(getCookie('level')!=2){
            window.history.back(-1);
        }
    },
    components:{
      jnTablemanage
    },
    computed:{
        dataHei:function(){
          var dataHei=(document.documentElement.clientHeight-110)+'px'
          return dataHei
        },
    }
}
</script>

<style>
.el-dialog__body{
    max-height:560px !important;
    overflow: auto !important;
}
.el-upload--picture-card{
    width:60px !important;
    height:60px !important;
    line-height: 60px !important;
}
</style>